import React from 'react';
import { Card, Row, Col, Statistic, Progress } from 'antd';
import { 
    ApiOutlined, 
    CloudServerOutlined, 
    ExclamationCircleOutlined, 
    CheckCircleOutlined,
    BarChartOutlined
} from '@ant-design/icons';
import type { ApiStatisticsOverview } from '../../../services/apiStatistics';

interface ApiOverviewCardsProps {
    data: ApiStatisticsOverview | null;
    loading?: boolean;
}

const ApiOverviewCards: React.FC<ApiOverviewCardsProps> = ({ data, loading = false }) => {
    // 如果没有数据，显示默认值
    const defaultData: ApiStatisticsOverview = {
        totalApiCount: 0,
        restApiCount: 0,
        dubboApiCount: 0,
        highRiskApiCount: 0,
        activeApiCount: 0,
        avgDeprecationScore: 0,
        totalRiskApiCount: 0,
        activityRate: 0
    };

    // 安全的数据合并，确保所有字段都有值
    const stats = data ? {
        totalApiCount: data.totalApiCount || 0,
        restApiCount: data.restApiCount || 0,
        dubboApiCount: data.dubboApiCount || 0,
        highRiskApiCount: data.highRiskApiCount || 0,
        activeApiCount: data.activeApiCount || 0,
        avgDeprecationScore: data.avgDeprecationScore || 0,
        totalRiskApiCount: data.totalRiskApiCount || 0,
        activityRate: data.activityRate || 0
    } : defaultData;

    // 计算百分比
    const restPercentage = stats.totalApiCount > 0 ? 
        Math.round((stats.restApiCount / stats.totalApiCount) * 100) : 0;
    const dubboPercentage = stats.totalApiCount > 0 ? 
        Math.round((stats.dubboApiCount / stats.totalApiCount) * 100) : 0;
    const riskPercentage = stats.totalApiCount > 0 ? 
        Math.round((stats.highRiskApiCount / stats.totalApiCount) * 100) : 0;

    return (
        <div style={{ marginBottom: '24px' }}>
            <Row gutter={[16, 16]}>
                {/* 总API数量 */}
                <Col xs={24} sm={12} md={8} lg={4.8}>
                    <Card 
                        size="small" 
                        loading={loading}
                        style={{ 
                            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                            border: 'none',
                            borderRadius: '12px',
                            boxShadow: '0 4px 20px rgba(102, 126, 234, 0.3)'
                        }}
                    >
                        <Statistic
                            title={
                                <span style={{ color: 'rgba(255,255,255,0.8)', fontSize: '13px' }}>
                                    <ApiOutlined style={{ marginRight: '6px' }} />
                                    总API数量
                                </span>
                            }
                            value={stats.totalApiCount}
                            valueStyle={{ 
                                color: '#fff', 
                                fontSize: '28px', 
                                fontWeight: 'bold'
                            }}
                            suffix={
                                <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px' }}>
                                    个
                                </span>
                            }
                        />
                    </Card>
                </Col>

                {/* REST接口 */}
                <Col xs={24} sm={12} md={8} lg={4.8}>
                    <Card 
                        size="small" 
                        loading={loading}
                        style={{ 
                            background: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
                            border: 'none',
                            borderRadius: '12px',
                            boxShadow: '0 4px 20px rgba(17, 153, 142, 0.3)'
                        }}
                    >
                        <Statistic
                            title={
                                <span style={{ color: 'rgba(255,255,255,0.8)', fontSize: '13px' }}>
                                    <CloudServerOutlined style={{ marginRight: '6px' }} />
                                    REST接口
                                </span>
                            }
                            value={stats.restApiCount}
                            valueStyle={{ 
                                color: '#fff', 
                                fontSize: '28px', 
                                fontWeight: 'bold'
                            }}
                            suffix={
                                <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px' }}>
                                    个 ({restPercentage}%)
                                </span>
                            }
                        />
                    </Card>
                </Col>

                {/* DUBBO接口 */}
                <Col xs={24} sm={12} md={8} lg={4.8}>
                    <Card 
                        size="small" 
                        loading={loading}
                        style={{ 
                            background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
                            border: 'none',
                            borderRadius: '12px',
                            boxShadow: '0 4px 20px rgba(79, 172, 254, 0.3)'
                        }}
                    >
                        <Statistic
                            title={
                                <span style={{ color: 'rgba(255,255,255,0.8)', fontSize: '13px' }}>
                                    <BarChartOutlined style={{ marginRight: '6px' }} />
                                    DUBBO接口
                                </span>
                            }
                            value={stats.dubboApiCount}
                            valueStyle={{ 
                                color: '#fff', 
                                fontSize: '28px', 
                                fontWeight: 'bold'
                            }}
                            suffix={
                                <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px' }}>
                                    个 ({dubboPercentage}%)
                                </span>
                            }
                        />
                    </Card>
                </Col>

                {/* 高风险API */}
                <Col xs={24} sm={12} md={8} lg={4.8}>
                    <Card 
                        size="small" 
                        loading={loading}
                        style={{ 
                            background: riskPercentage > 20 ? 
                                'linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%)' :
                                'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
                            border: 'none',
                            borderRadius: '12px',
                            boxShadow: `0 4px 20px ${riskPercentage > 20 ? 'rgba(255, 65, 108, 0.3)' : 'rgba(252, 182, 159, 0.3)'}`
                        }}
                    >
                        <Statistic
                            title={
                                <span style={{ 
                                    color: riskPercentage > 20 ? 'rgba(255,255,255,0.8)' : 'rgba(139, 69, 19, 0.8)', 
                                    fontSize: '13px' 
                                }}>
                                    <ExclamationCircleOutlined style={{ marginRight: '6px' }} />
                                    高风险API
                                </span>
                            }
                            value={stats.highRiskApiCount}
                            valueStyle={{ 
                                color: riskPercentage > 20 ? '#fff' : '#8B4513', 
                                fontSize: '28px', 
                                fontWeight: 'bold'
                            }}
                            suffix={
                                <span style={{ 
                                    color: riskPercentage > 20 ? 'rgba(255,255,255,0.7)' : 'rgba(139, 69, 19, 0.7)', 
                                    fontSize: '14px' 
                                }}>
                                    个 ({riskPercentage}%)
                                </span>
                            }
                        />
                    </Card>
                </Col>

                {/* 活跃API */}
                <Col xs={24} sm={12} md={8} lg={4.8}>
                    <Card 
                        size="small" 
                        loading={loading}
                        style={{ 
                            background: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
                            border: 'none',
                            borderRadius: '12px',
                            boxShadow: '0 4px 20px rgba(168, 237, 234, 0.3)'
                        }}
                    >
                        <Statistic
                            title={
                                <span style={{ color: 'rgba(75, 85, 99, 0.8)', fontSize: '13px' }}>
                                    <CheckCircleOutlined style={{ marginRight: '6px' }} />
                                    活跃API
                                </span>
                            }
                            value={stats.activeApiCount}
                            valueStyle={{ 
                                color: '#374151', 
                                fontSize: '28px', 
                                fontWeight: 'bold'
                            }}
                            suffix={
                                <span style={{ color: 'rgba(75, 85, 99, 0.7)', fontSize: '14px' }}>
                                    个
                                </span>
                            }
                        />
                        <div style={{ marginTop: '8px' }}>
                            <Progress 
                                percent={Math.round(stats.activityRate || 0)} 
                                size="small"
                                strokeColor={{
                                    '0%': '#11998e',
                                    '100%': '#38ef7d',
                                }}
                                trailColor="rgba(75, 85, 99, 0.1)"
                                showInfo={false}
                            />
                            <div style={{ 
                                fontSize: '12px', 
                                color: 'rgba(75, 85, 99, 0.6)', 
                                textAlign: 'center',
                                marginTop: '4px'
                            }}>
                                活跃率: {(stats.activityRate || 0).toFixed(1)}%
                            </div>
                        </div>
                    </Card>
                </Col>
            </Row>

            {/* 附加统计信息 */}
            <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
                <Col xs={24} sm={12}>
                    <Card 
                        size="small" 
                        loading={loading}
                        style={{ 
                            background: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
                            border: 'none',
                            borderRadius: '8px'
                        }}
                    >
                        <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: '13px', color: 'rgba(139, 69, 19, 0.8)', marginBottom: '4px' }}>
                                平均废弃分数
                            </div>
                            <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#8B4513' }}>
                                {(stats.avgDeprecationScore || 0).toFixed(1)}
                                <span style={{ fontSize: '14px', marginLeft: '4px' }}>分</span>
                            </div>
                        </div>
                    </Card>
                </Col>
                <Col xs={24} sm={12}>
                    <Card 
                        size="small" 
                        loading={loading}
                        style={{ 
                            background: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)',
                            border: 'none',
                            borderRadius: '8px'
                        }}
                    >
                        <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: '13px', color: 'rgba(139, 69, 19, 0.8)', marginBottom: '4px' }}>
                                存在风险API
                            </div>
                            <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#8B4513' }}>
                                {stats.totalRiskApiCount}
                                <span style={{ fontSize: '14px', marginLeft: '4px' }}>个</span>
                            </div>
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default ApiOverviewCards;